<template>
	<view class="container">
		<view class="header">
			<view class="location">西岭雪山</view>
			<view class="sun_box">
				<view class="header_left">
					<view class="weather-info">6°</view>
					<view class="weather-detail">明1°/12°</view>
				</view>

				<view class="header_right">
					<view class="humidity">空气良:56</view>
					<view class="humidity">湿度：73%</view>
					<view class="humidity">体感温度：4°</view>
					<view class="humidity">直穿大衣</view>
					<view class="humidity">7:47日出</view>
					<view class="humidity">紫外线很弱</view>
				</view>
			</view>
		</view>

		<view class="entry-info">
			<view class="section-title">入场信息</view>
			<view class="entry-details">9点开始入场，当前人流量较大，请注意错峰出行</view>
		</view>

		<view class="entry-info">
			<view class="entry-details">
				<view class="flex_between flex_between_two">
					<view class="">
						<view>鸳鸯池索道上行排队</view>
						<view class="bold_text">1小时</view>
					</view>
					<view class="">
						<view>已入场</view>
						<view class="bold_text">5200</view>
					</view>
					<view class="">
						<view>今日余票</view>
						<view class="bold_text">5200</view>
					</view>
				</view>
				<view class="flex_between flex_between_two">
					<view class="">
						<view>日月峡景区上排队</view>
						<view class="bold_text">10分钟</view>
					</view>
					<view class="">
						<view>未入场</view>
						<view class="bold_text">25200</view>
					</view>
					<view class="">
						<view>明日预定</view>
						<view class="bold_text">15200</view>
					</view>
				</view>
			</view>
		</view>

		<view class="queue-info">
			<view class="section-title">拥挤程度</view>
			<view class="queue-description">景区现阶段排队，排队长度约300米，需等待30分钟，请尽量避开高峰时间段。</view>
		</view>

		<view class="parking-charging">
			<view class="parking-charging-two">
				<view class="section-title">停车位</view>
				<view class="">
					<view>空余车位</view>
					<view class="bold_text">630</view>
				</view>
				<view class="">
					<view>待入场车辆</view>
					<view class="bold_text">520</view>
				</view>
			</view>

			<view class="parking-charging-two">
				<view class="section-title">充电桩</view>
				<view class="">
					<view>空余充电位</view>
					<view class="bold_text">230</view>
				</view>
				<view class="">
					<view>待充电车辆</view>
					<view class="bold_text">120</view>
				</view>
			</view>
		</view>

		<view class="extra-info">
			<view class="section-title">区域内酒店</view>
			<u-scroll-list :indicator="false">
				<view class="shop_fa" v-for="(item,index) in swiperList" :key="index">
					<image class="pic" :src="item.Img" mode=""></image>
					<view class="ShopName">{{item.Name}}</view>
				</view>
			</u-scroll-list>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList
	} from '@/api/mall.js'
	export default {
		data() {
			return {
				swiperList: [],
			};
		},
		onLoad() {
			this.getHotelList();
		},
		methods: {
			// 获取酒店产品数据
			async getHotelList() {
				try {
					const Data = await getGoodsList({
						TypeId: 13,
						Size: 5,
					})
					console.log(Data.Data)
					this.swiperList = Data.Data;
				} catch (e) {

				}
			},
		},

	};
</script>

<style lang="scss" scoped>
	$domain-url: 'https://xsstp.monkeysoftware.cn'; // 定义域名变量

	.container {
		padding: 20px;
		background-image: url(#{$domain-url}/upload/img/20250306/202503061809060563.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.header {
			color: white;

			.location {
				font-size: 14px;
				margin-bottom: 3%;
			}

			.sun_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.header_left {
					width: 34%;
					border-right: 2px solid #fff;
					text-align: center;

					.weather-info {
						font-size: 40px;
						font-weight: bold;
						text-align: center;
					}
				}

				.header_right {
					width: 1;
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					padding: 0 4%;

					.humidity {
						width: 45%;
					}
				}


				.weather-detail,
				.humidity {
					font-size: 14px;
					margin: 5px 0;
				}
			}


		}

		.entry-info,
		.queue-info,
		.parking-charging-two,
		.extra-info {
			background: rgba(19, 77, 172, .4);
			padding: 15px;
			border-radius: 10px;
			margin: 15px 0;
			color: #fff;

			.section-title {
				font-size: 18px;
				margin-bottom: 10px;
			}

			.entry-details {
				display: flex;
				flex-direction: column;
				font-size: 14px;
				align-items: flex-start;
			}

			.flex_between_two {
				width: 100%;
				text-align: center;
				margin: 2% 0;

				.bold_text {
					font-size: 18px;
					font-weight: bold;
				}
			}
		}


		.queue-description {
			color: #fff;
		}

		.parking-charging-two {
			width: 48%;

			.bold_text {
				font-size: 18px;
				font-weight: bold;
			}
		}

		.parking-charging {
			display: flex;
			justify-content: space-between;

			.parking-info,
			.charging-info {
				width: 48%;
			}
		}

		.hotel-list {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;

			.hotel-image {
				width: 32%;
				border-radius: 10px;
			}
		}
	}

	/deep/ .u-scroll-list__scroll-view {
		margin-top: 2% !important;
		width: 100% !important;
		height: 130px !important;

		.shop_fa {
			width: 96px;
			height: 130px;
			flex-shrink: 0;
			margin-right: 2%;

			.pic {
				width: 100%;
				height: 96px;
				border-radius: 6px;
			}

			.ShopName {
				margin-left: 10px;
				font-size: 16px;
				font-weight: 400;
				margin-top: 4px;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>